<template>
  <div style="  padding-top: 50px;
  z-index: 999;">
    <van-swipe ref="swipe" class="swipe" :initial-swipe="swipeIndex" :loop="false" @change="swipeOnChange">
      <van-swipe-item v-for="(item,index) in swipeItem" :key="index">
        <div class="swipe_item">
          <div class="text" :class="{ disableCard:!item.canBorrow}">
            <span class="Symbol">₫ </span>
            <span>{{ formatterMoney(item.loanAmount)}}</span>
          </div>
          <img v-if="item.canBorrow" style="width: 100%" src="../../assets/ic_home_card.png">
          <img v-else style="width: 100%" src="../../assets/ic_home_card_un.png">
        </div>
      </van-swipe-item>
    </van-swipe>
    <!--    <swiper-->
    <!--        :width="300"-->
    <!--        :initialSlide="swipeIndex"-->
    <!--        :pagination="{ clickable: true }"-->
    <!--        @slideChange="onSlideChange"-->
    <!--        ref="mySwiper"-->
    <!--    >-->
    <!--      <swiper-slide class="swiper-slide" v-for="(item,index) in swipeItem"  @click="onSwiper(index)" :key="index">-->
    <!--        <div class="text" :class="{ disableCard:!item.canBorrow}">-->
    <!--          <span class="Symbol">₫ </span>-->
    <!--          <span>{{ item.loanAmount }}</span>-->
    <!--        </div>-->
    <!--        <img v-if="item.canBorrow" style="width: 100%" src="../../assets/ic_home_card.png">-->
    <!--        <img v-else style="width: 100%" src="../../assets/ic_home_card_un.png">-->
    <!--      </swiper-slide>-->
    <!--    </swiper>-->
  </div>
</template>

<script>
import {onMounted, ref, watch, defineComponent,inject} from 'vue'
import {deepClone, formatMoney} from '@/utils/tool'
// import {Swiper, SwiperSlide} from 'swiper/vue';
// import SwiperCore, {Pagination} from 'swiper';
// swiper.less/sass/css 决定了基础的样式
// import "swiper/swiper.less";
// import 'swiper/components/pagination/pagination.less';

// SwiperCore.use([Pagination]);
export  default  defineComponent(
    {
      props: {
        loanInfo: {
          type: Object,
        }
      },
      emits: {
        // 对应名称接收消息
        loanChange: () => {
          return true
        }
      },
      setup(props, ctx) {
        let swipeIndex = ref(0)
        const swipeItem = ref([])
        const swipe = ref(null);
        const mySwiper = ref(null)

        watch(() => props.loanInfo, (val) => {
          swipeItem.value = val.array
          const loanArr = deepClone(val.array)
          const sortValue = loanArr.sort((a, b) => {
            // 按金额从大到小排序
            if (a['loanAmount'] === b['loanAmount']) {
              if (a.loanAmount > b.loanAmount) {
                return 1
              } else {
                return -1
              }
            } else if (a['canBorrow'] === b['canBorrow']) {
              // 是否可借排序
              if (a.canBorrow > b.canBorrow) {
                return 1
              } else {
                return -1
              }
            }
          })
          val.array.forEach((item, index) => {
            if (item.loanAmount === sortValue[0].loanAmount) {
              swipeOnChange(index)
              swipeIndex.value = index
            }
          })
        })
        // const onClick = (value, index) => {
        //   swipeIndex.value = index
        // }
        const swipeOnChange = (index) => {
          ctx.emit('loanChange', props.loanInfo.array[index])
        }
        const onSwiper = (swiper) => {
          swipeIndex.value = swiper
        }
        const onSlideChange = (swiper) => {
          // console.log(swiper)
        }
        // 格式化金额
        const formatterMoney = (value) => {
          if (value) {
            return formatMoney(value, 0, "", '.')
          } else {
            return value
          }
        }
        return {
          onSlideChange,
          onSwiper,
          swipeIndex,
          swipeOnChange,
          swipeItem,
          swipe,
          mySwiper,
          ...props,
          formatterMoney,
        }
      },
    }
)
</script>

<style scoped lang="less">
::v-deep .swiper-wrapper {
  margin-left: 37.5px;
}

::v-deep .swiper-pagination-bullets {
  bottom: 0px !important;
}

::v-deep .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 15px !important;
  border-radius: 10px !important;
  background-color: #ff5352 !important;
}

.swiper-slide {
  position: relative;
  width: 100%;
  height: 169px;

  .text {
    position: absolute;
    left: 25%;
    top: 45%;
    color: #ffffff;
    font-size: 22px;
    line-height: 40px;
    display: flex;
    align-items: center;

    .Symbol {
      font-size: 30px;
      margin-right: 5px;
    }
  }

  img {
    height: 169px
  }

}

.swiper-pagination {
  bottom: 0px;

  ::v-deep .swiper-pagination-bullet {
  }

  ::v-deep .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 15px !important;
    border-radius: 10px !important;
    background-color: #ff5352 !important;
  }
}

.disableCard {
  opacity: 0.6;
}

.swipe {

  ::v-deep .van-swipe__indicator--active {
    width: 15px !important;
  }

  ::v-deep .van-swipe__track {
  }

  ::v-deep .van-swipe__indicator {
    background-color: #ff5352 !important;
    border-radius: 10px !important;
  }

  ::v-deep .van-swipe-item {
  }

  .swipe_item {
    position: relative;
    height: 100%;
    width: 100%;

    .text {
      position: absolute;
      left: 25%;
      top: 45%;
      color: #ffffff;
      font-size: 22px;
      line-height: 40px;
      display: flex;
      align-items: center;

      .Symbol {
        font-size: 30px;
        margin-right: 5px;
      }
    }

    img {
      height: 169px
    }

  }
}
</style>
